<template>
	<!-- home骨架 -->
	<el-container class="home" v-loading="loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)">
		<!-- home-top -->
		<el-header>
			<div class="home-top-left">
				<img src="../../../static/image/20170604180151326296.png">
				<span>晨小书后台管理系统</span>
			</div>
			<el-button type="danger" round @click='loginOut'>退出登录</el-button>
		</el-header>
		<el-container>
			<!-- 侧边栏菜单 -->
			<el-aside width="300px" >
				<el-menu default-active="2" class="el-menu-vertical-demo"  router
				 background-color="#545c64" text-color="#fff" active-text-color="#ffd04b"
				 v-for='(item,index) in menuList' :key="index"
				 >
					<el-submenu>
						<template slot="title">
							<i class="el-icon-menu"></i>
							<span>{{item.name}}</span>
						</template>
						<div v-for="(item2,index) in item.children" :key='index'>
							<el-menu-item :index="'/'+ item2.name">
								{{item2.name}}
							</el-menu-item>
						</div>
					</el-submenu>

				</el-menu>
			</el-aside>
			<el-main>
				<router-view/>
			</el-main>
		</el-container>
		<!-- <router-view/> -->
	</el-container>
</template>

<script>
	export default {
		data() {
			return {
				// 菜单数据
				menuList:[],
				loading:true
			}
		},
		methods: {
			loginOut() {
				this.$confirm('确定要退出本系统, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					sessionStorage.removeItem('token')
					this.$message({
						type: 'success',
						message: '退出成功!'
					});
					this.$router.replace('/')
				}).catch(() => {
				});
			},
			// 获取左侧菜单栏内容
		    async getMenuData(){
				this.loading=true
				await this.axios.get('/api/admin/menus').then(res=>{
					console.log(res.data)
					this.menuList=res.data
					this.loading=false
					
				})
			}
		},
		created() {
			this.getMenuData()
		}
	}
</script>
<style scoped="scoped">
	.el-header {
		display: flex;
		justify-content: space-between;
		background-color: #B3C0D1;
		color: #333;
		text-align: center;
		align-items: center;
		line-height: 60px;
		/* padding: 30px; */
	}

	.el-aside {
		background-color: #545c64;
		color: #333;
		/* text-align: center; */
		height: 100vh;
	}

	.el-main {
		background-color: #E9EEF3;
		color: #333;
		text-align: center;
		/* line-height: 160px; */
	}

	body>.el-container {
		margin-bottom: 40px;
	}

	.el-container:nth-child(5) .el-aside,
	.el-container:nth-child(6) .el-aside {
		line-height: 260px;
	}

	.el-container:nth-child(7) .el-aside {
		line-height: 320px;
	}

	.home-top-left img {
		width: 40px;
		height: 40px;
		border-radius: 40px;
		vertical-align: middle !important;
	}

	.home-top-left span {
		font-size: 20px;
		color: #fff;
		margin-left: 30px;
		font-weight: 700;
		vertical-align: middle !important;
	}

	.el-button {
		/* line-height: 50px; */
	}
</style>
